package com.quyunshuo.module.home.activity.main.compose

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ScrollableTabRow
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.quyunshuo.module.home.R
import kotlinx.coroutines.launch

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HomePage() {
    // 创建一个可观察的字符串列表，使用 remember 确保状态在重组时保持不变
    val list = remember {
        // 使用 mutableStateListOf 创建响应式列表，列表变更时自动触发重组
        // 如果列表是静态的，那么完全没有必要使用mutableStateListOf ，只有响应式的时候才需要使用。
        listOf<String>(
            "All",         // 默认选项：显示所有内容
            "coffee",      // 咖啡类内容
            "nike",        // Nike品牌内容
            "coffee nike", // 咖啡与Nike的组合内容
        )
    }

// 创建分页状态管理器，pageCount 根据列表大小动态确定页面数量
    val pagerState = rememberPagerState(pageCount = { list.size })

// 创建协程作用域用于处理异步滚动操作
    val coroutineScope = rememberCoroutineScope()

// 创建垂直布局的Column
    Column {
        // 创建可滚动的标签行组件
        ScrollableTabRow(
            selectedTabIndex = pagerState.currentPage, // 绑定当前选中的标签索引
            containerColor = Color.Transparent,        // 设置标签行背景为透明
            contentColor = Color.Transparent,          // 设置内容颜色为透明
            edgePadding = 0.dp,                       // 移除边缘内边距
            indicator = {},                           // 禁用选择指示器（下划线）
            divider = {}                               // 禁用标签之间的分隔线
        ) {
            // 遍历标签列表中的每个项
            list.forEachIndexed { index, item ->
                // 创建自定义标签项组件
                CoffeeTabItem(
                    selected = pagerState.currentPage == index, // 当前标签是否被选中
                    data = item // 标签显示的文本数据
                ) {
                    // 当标签被点击时执行的lambda
                    coroutineScope.launch {
                        // 使用动画效果平滑滚动到对应页面
                        pagerState.animateScrollToPage(index)
                    }
                }
            }
        }

        // 添加10dp的垂直间距
        Spacer(Modifier.height(10.dp))

        // 创建水平分页视图
        HorizontalPager(
            state = pagerState // 绑定分页状态
        ) { page ->
            // 根据当前页面索引显示对应的内容
            when (page) {
                0 -> AllTab()       // 第一页显示"全部"内容
                else -> AllTab()    // 其他情况显示全部内容（安全回退）
            }
        }
    }
}

@Composable
fun CoffeeTabItem(selected: Boolean, data: String, click: () -> Unit) {
    Text(
        text = data,
        style = TextStyle(
            color = colorResource(R.color.white),
            textAlign = TextAlign.Center,
            fontSize = 18.sp
        ),
        modifier = Modifier
            .padding(horizontal = 5.dp)
            .background(
                colorResource(if (selected) R.color.base_colorAccent else R.color.line_color),
                RoundedCornerShape(18.dp)
            )
            .padding(horizontal = 10.dp)
            .clickable {
                click.invoke()
            }
    )
}

@Composable
fun AllTab() {
    Column(
        Modifier
            .fillMaxSize()
            .padding(horizontal = 5.dp)
    ) {

        Text("AllTab")

    }
}





